import React, { Component,lazy,Suspense} from "react";
import {
  HashRouter as Router,
  Route,
  Switch,
  Redirect,
  Link,
} from "react-router-dom";
import Home from "../pages/Home";

import NotFound from "../pages/NotFound";
import Detail from "../pages/Detail";
import Detail2 from "../pages/Detail2";
import Mine from "../pages/Mine";
import Wode from "../pages/Wode";
import Login from "../pages/Login";
import Register from "../pages/Register";
import RouteWithSubRoutes from "./RouteWithSubRoutes";
import Info from "../pages/Info";
import Info2 from "../pages/Info2";

let About = lazy(()=>import ("../pages/About"));
let List = lazy(()=>import ("../pages/List"));

export default class index extends Component {
  constructor() {
    super();
    this.state = {
      list: [
        { path: "/", component: Home, exact: true },
        { path: "/about", component: About },
        { path: "/list", component: List },
        { path: "/detail/:id", component: Detail },
        { path: "/detail2", component: Detail2 },
        { path: "/mine", component: Mine },
        { path: "/404", component: NotFound },
        {
          path: "/wode",
          component: Wode,
          list: [
            {
              path: "/wode/",
              component: Login,
              exact: true,
            },
            {
              path: "/wode/login",
              component: Login,
            },
            {
              path: "/wode/register",
              component: Register,
              list: [
                {
                  path: "/wode/register/",
                  component: Info,
                  exact:true
                },
                {
                  path: "/wode/register/info",
                  component: Info,
                },
                {
                  path: "/wode/register/info2",
                  component: Info2,
                },
              ],
            },
          ],
        },
      ],
    };
  }

  render() {
    return (
      <>
        <Router>
          <Suspense fallback={<div>数据正在加载ing</div>}>
          <Switch>
            {/* {this.state.list.map((item, index) => {
              return (
                <Route
                  path={item.path}
                  component={item.component}
                  exact={item.exact}
                ></Route>
              );
            })} */}
            {this.state.list.map(
              (
                route,
                i //route 是list中的对象
              ) => (
                //对象里面有path  component
                <RouteWithSubRoutes key={i} {...route} />
              )
            )}
            <Redirect path="*" to="/404"></Redirect>
          </Switch>
          </Suspense>
        </Router>
      </>
    );
  }
}
